<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<style type="text/css">
	 .introduce{
	 	font-family: '黑体';
	 	font-size: 1.8em;
	 }
	 .content{
	 	font-family: '楷体';
	 	font-size: 1.6em;
	 	display:inline-block;
	 	margin-top:7px;
	 }
	 #js p{
	 	line-height: 22px;
	 	font-size: 15px;
	 	font-family: '楷体';
	 }	 
</style>
	<div style="padding:30px 50px 0px 50px; ">
		<p>
			<span  class="introduce">项目介绍：</span><br/>
			<span class="content">该项目用于图书馆对图书的借阅及库存管理，前台由EasyUi及少量BootStrap完成，后台使用的SpringBoot，数据库使用的Mysql,
				项目中展示数据的表格是使用的DataGrid，输入框的大部分校验由Validatebox完成。</span>
		</p>
		<br/>
		
		<p sec:authorize="hasRole('ROLE_ADMIN')">
			<span  class="introduce">功能介绍：</span><br/>
			<span class="content">该项目分为管理端和用户端，此页面为管理端首页，管理端功能主要有对图书的管理、审批用户的借书申请、对用户及部门的管理、查看操作日志。</span>
		</p>
		<p sec:authorize="!hasRole('ROLE_ADMIN')">
			<span  class="introduce">功能介绍：</span><br/>
			<span class="content">该项目分为管理端和用户端，此页面为用户端首页，用户端功能主要是借书、还书、修改密码。</span>
		</p>
		<br/>
		
		<p sec:authorize="hasRole('ROLE_ADMIN')">
			<span  class="introduce">图书管理：</span><br/>
			<span class="content">增加图书、删除图书、修改图书信息以及查询图书，用户可以根据库存量来进行借书；用户端借书需要提交借书申请，只有管理端同意了申请才可以借到；
			管理端还可以查看借出去的图书以及用户的历史还书记录。</span>
		</p>
		
		<p sec:authorize="!hasRole('ROLE_ADMIN')">
			<span  class="introduce">借书：</span><br/>
			<span class="content">可以查看到所有图书信息，根据自己的需要向图书管理员提交借书申请，等待管理员通过审核后就可以借到该本图书。</span>
		</p>
		<br sec:authorize="!hasRole('ROLE_ADMIN')">
		
		<p sec:authorize="!hasRole('ROLE_ADMIN')">
			<span  class="introduce">还书：</span><br/>
			<span class="content">查看自己所借所有书籍，不再需要时可以还书。</span>
		</p>
		<br/>
		
		<p sec:authorize="!hasRole('ROLE_ADMIN')">
			<span  class="introduce">修改密码：</span><br/>
			<span class="content">由于用户是由管理员添加的，密码都是统一默认的，所以为了账户安全着想，请尽快更改密码。</span>
		</p>
		
		<p sec:authorize="hasRole('ROLE_ADMIN')">
			<span  class="introduce">部门管理：</span><br/>
			<span class="content">管理端可以新增、删除、修改学院以及班级的信息。</span>
		</p>
		<br sec:authorize="hasRole('ROLE_ADMIN')">
		
		<p sec:authorize="hasRole('ROLE_ADMIN')">
			<span  class="introduce">用户管理：</span><br/>
			<span class="content">管理端可以新增学生用户和教师用户、修改用户信息、查询用户，新增的用户默认密码为：“111111”；重置用户密码，密码为“111111”。</span>
		</p>
		<br/>
		<p>
		
			<span  class="introduce">个人信息：</span><br/>
			<span class="content">查看本账户的详细信息。</span>
		</p>
		<br/>
		<p>
			<span  class="introduce">账户安全性问题：</span><br/>
			<span class="content">管理员以及用户的密码都经过不可逆加密处理,拦截器使用的Spring Security</span>
		</p>
		
	</div>
	<form method="post" id="jieshu" sec:authorize="!hasRole('ROLE_ADMIN')">
		<div style="width:92%; margin: 0px auto; margin-top: 30px;">
			<div class="book" th:each="books:${books}" th:id="${books.id}" style="width: 30%; margin-left:3%; margin-bottom:30px; height: 160px; float: left;">
				<img th:src="@{book/download(id=${books.id})}" width="30%" height="160px;">
				<div id="js" style=" width:65%; padding-left:10px; padding-top:20px; float: right;">
					<p>
						<label>书名：</label><span th:text="${books.bookname}"></span>
					</p>
					<p>
						<label>出版社：</label><span th:text="${books.press}"></span>
					</p>
					<p>
						<label>ISBN编号：</label><span th:text="${books.isbn}"></span>
					</p>
					<p>
						<label>库存量：</label><span th:text="${books.number}" ></span>
					</p>
					<p>
						<a  onclick="dianji(this.title,this.id)" th:id="${books.id}" th:title="${books.number}" class="easyui-linkbutton" style="font-family: '黑体';">点击借书</a>
					</p>
				</div>
			</div>
		</div>
	</form>
	
	<script type="text/javascript">
		layui.use('layer', function(){
		  	var layer = layui.layer;
		});              
		function dianji(value,id){
			if(value < 1){
				$.messager.show({
					title:'提示信息!',
					msg:'该书已无库存，无法借阅！',
					height:180,
					width:220
				});
			}else{
				$.messager.confirm('提示信息','确认提交借书申请？',function(r){
					if(r){
						$.post('book/auditbook',{ids:id},function(result){
							layer.confirm('已提交借书申请，等待管理员审核', {
							  	btn: ['知道了'] //按钮
							}, function(){
								parent.location.reload();
							});
						});	
							
					}else{
						return;
					}
				});
			}
		}
	</script>
</body>
</html>